import React, { useEffect, useState } from 'react'
import { Avatar, Tag, Input, Button, Drawer } from "antd"
import { UserOutlined, AlignCenterOutlined } from '@ant-design/icons';
import { InfiniteScroll, List } from 'antd-mobile-v5'
import axios from "axios"
import "./list.less"


export default function Lists(props) {
    const [list, setList] = useState([])
    const [tag, setTag] = useState([
        {
            id: "1",
            color: "#FF8888",
            title: '大神',
            flag: false,
        },
        {
            id: "2",
            color: '#FFA488',
            title: '小白',
            flag: false,
        },
        {
            id: "3",
            color: "#FFBB66",
            title: "大佬",
            flag: false,
        },
        {
            id: "4",
            color: "#FFCC22",
            title: "店铺运营",
            flag: false,
        },
        {
            id: "5",
            color: "#77FF00",
            title: "超级大神",
            flag: false,
        },
        {
            id: "6",
            color: "#00FFFF",
            title: "顶级大神",
            flag: false,
        },
        {
            id: "7",
            color: "#5555FF",
            title: "普通教师",
            flag: false,
        },
        {
            id: "8",
            color: "#E8CCFF",
            title: "高级教师",
            flag: false,
        },
        {
            id: "9",
            color: "#FFB3FF",
            title: "超级教师",
            flag: false,
        },
    ])
    const [val, setVal] = useState("")
    const getList = () => {
        axios({
            method: "get",
            url: 'https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface',
        }).then(res => {
            console.log(res.data.data.List)
            setList(res.data.data.List)
        })
    }
    const serch = () => {
        console.log(1)
    }
    const inp = e => {
        console.log(e)
    }
    const [visible, setVisible] = useState(false);

    const showDrawer = () => {
        setVisible(true);
    };

    const onClose = () => {
        setVisible(false);
    };

    useEffect(() => {
        getList()
    }, [])
    return (
        <div>
            <div style={{
                textAlign: "center",
                display: "flex",
                justifyContent: "space-around"
            }}>
                <div style={{
                    width: "70%"
                }}>
                    <Input style={{
                        width: "100%",
                        border: "1px solid orange",
                        borderRadius: "50px",
                    }} onChange={inp} value={val}></Input>
                    <Button style={{
                        marginLeft: "-64px",
                        backgroundColor: 'orange',
                        borderRadius: "20px",
                        color: "#fff"
                    }} onClick={serch}>搜索</Button>
                </div>
                <div style={{
                    color: "#ccc",
                    marginTop: "5px"
                }}>
                    <span onClick={showDrawer}>筛选</span> <AlignCenterOutlined />
                </div>
            </div>
            {
                list.length && list.map(ele => (
                    <div key={ele.id} style={{
                        width: "90%",
                        margin: "20px auto",
                        height: "150px",
                        border: "1px solid #ccc",
                        display: "flex",
                        justifyContent: "space-around"
                    }}>
                        <div>
                            <Avatar size={64} src={ele.img} icon={<UserOutlined />} />
                            <h1>{ele.username}</h1>
                        </div>
                        <div>
                            <h2>{ele.position}</h2>
                            {/* <h3>{ele.introduce}</h3> */}
                        </div>
                    </div>
                ))
            }

            <Drawer title="Basic Drawer" placement="right" onClose={onClose} visible={visible}>
                {tag.map(ele => (
                    <Tag key={ele.id} color={ele.color}>{ele.title}</Tag>
                ))}
            </Drawer>
        </div >
    )
}
